<template>
  <div class="system-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统列表</span>
          <el-button type="primary" @click="handleAdd">新增系统</el-button>
        </div>
      </template>
      <el-table :data="systemList" v-loading="loading">
        <el-table-column prop="systemName" label="系统名称" />
        <el-table-column prop="systemCode" label="系统编码" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="row.status === 1 ? 'success' : 'danger'">
              {{ row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleViewWorkflows(row)">查看流程</el-button>
            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="500px"
      @close="resetForm"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="系统名称" prop="systemName">
          <el-input v-model="form.systemName" />
        </el-form-item>
        <el-form-item label="系统编码" prop="systemCode">
          <el-input v-model="form.systemCode" />
        </el-form-item>
        <el-form-item label="系统描述" prop="description">
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { getSystemList, saveSystem, type SystemForm, deleteSystem } from '../../api/system'
import { useRouter } from 'vue-router'

const loading = ref(false)
const submitting = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const systemList = ref([])

const formRef = ref<FormInstance>()
const form = ref<SystemForm>({
  systemCode: '',
  systemName: '',
  description: '',
  status: 1
})

const rules = {
  systemName: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
  systemCode: [{ required: true, message: '请输入系统编码', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

const router = useRouter()

// 获取系统列表
const fetchSystemList = async () => {
  try {
    loading.value = true
    const res = await getSystemList()
    systemList.value = res.data
  } catch (error: any) {
    ElMessage.error(error.message || '获取系统列表失败')
  } finally {
    loading.value = false
  }
}

// 新增系统
const handleAdd = () => {
  dialogTitle.value = '新增系统'
  dialogVisible.value = true
}

// 编辑系统
const handleEdit = (row: SystemForm) => {
  dialogTitle.value = '编辑系统'
  form.value = { ...row }
  dialogVisible.value = true
}

// 删除系统
const handleDelete = (row: SystemForm) => {
  if (!row.id) {
    ElMessage.error('系统ID不存在')
    return
  }

  ElMessageBox.confirm('确认删除该系统吗？', '提示', {
    type: 'warning'
  }).then(async () => {
    try {
      await deleteSystem(row.id)
      ElMessage.success('删除成功')
      fetchSystemList()
    } catch (error: any) {
      ElMessage.error(error.message || '删除失败')
    }
  })
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        submitting.value = true
        await saveSystem(form.value)
        ElMessage.success('保存成功')
        dialogVisible.value = false
        fetchSystemList()
      } catch (error: any) {
        ElMessage.error(error.message || '保存失败')
      } finally {
        submitting.value = false
      }
    }
  })
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  form.value = {
    systemCode: '',
    systemName: '',
    description: '',
    status: 1
  }
}

// 查看系统流程
const handleViewWorkflows = (row: SystemForm) => {
  router.push(`/system/${row.id}/workflows`)
}

onMounted(() => {
  fetchSystemList()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 